<template>
  <div class="ClearanceSale">
    <span>特卖清仓</span>
    <ul>
      <li v-for="(v, index) in arr" :key="index">
        <img :src="v.img" alt="" />
        <div class="logo1">￥{{ v.newprice }}</div>
        <div class="logo2">￥{{ v.oldprice }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import service from "../../../utils/service";
export default {
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    service({
      url: "ClearanceSale",
      method: "get",
    }).then((res) => {
      // console.log(res.data);
      // res.data.navlist.forEach(element => {
      //     this.Arr.push(element);
      // });
      this.arr = res.data;
    });
  },
};
</script>

<style scoped>
.ClearanceSale {
  width: 90%;
  height: 180px;
  background-color: white;
  padding: 10px;
  /* margin-top: 10px; */
  margin: 10px auto;
  border-radius: 10px;
}
.ClearanceSale>span{
  font-weight: 700;
}
.ClearanceSale > ul {
  display: flex;
  overflow-x: auto;
  display: -webkit-box;
  -webkit-overflow-scrolling: touch;
  margin: 0.5rem 0.5rem;
}
.ClearanceSale > ul > li {
  width: 25%;
  text-align: center;
  font-size: 14px;
}
.ClearanceSale > ul > li>.logo2{
  text-decoration:line-through;
  color: gray;
}
.ClearanceSale > ul > li > img {
  width: 100%;
}
/* 隐藏滚动条 */
ul::-webkit-scrollbar {
  display: none;
}
</style>